<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-08-29 10:59:21
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-15 10:16:57
 * @FilePath: \ft-apply-admin\src\components\Button\src\BasicButton.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { Button, theme } from 'ant-design-vue'
import { generate } from '@ant-design/colors'
import type { ComponentOptionsMixin } from 'vue'
import { computed, unref, ref } from 'vue'
import { buttonProps } from './props'
import { useAttrs } from '@/hooks/core/useAttrs'
import { Icon } from '@/components/Icon'
import { debounce } from 'lodash-es';

defineOptions({ name: 'AButton', extends: Button as ComponentOptionsMixin, indeterminate: false })
const props = defineProps(buttonProps)
const { useToken } = theme
const { token } = useToken();
// get component class
const attrs = useAttrs({ excludeDefaultKeys: false })
const getButtonClass = computed(() => {
  const { disabled } = props;
  return [
    {
      'is-disabled': disabled,
    },
  ]
})
function generateAntColors(color: string) {
  return generate(color, {
    theme: 'default',
  })
}

const currentColor = ref<string>("");
const textColor = ref<string>("")
const getBackgroundColor = (color: string) => {
  const { disabled } = props;
  let map = {
    primary: token.value.colorPrimary,
    error: token.value.colorError,
    warning: token.value.colorWarning,
    success: token.value.colorSuccess,
  }
  if (color && !disabled) {
    currentColor.value = generateAntColors(map[color] || color)[4] || "";
    textColor.value = "#fff"
    return map[color] || color
  }
  return ""
}


// get inherit binding value
const getBindValue = computed(() => ({ ...unref(attrs), ...props }))
const isDisabled = ref<boolean>(false);
const debouncedClick = debounce(() => {  //阻止按钮多次点击
   // 如果按钮已经禁用，则不再执行
   if (isDisabled.value) return;
  // 按钮被点击后，调用外部传入的点击事件
  // props.onClick();
  // 禁用按钮一段时间，避免多次点击
  isDisabled.value = true;
  // 1秒后恢复按钮可点击状态
  setTimeout(() => {
    isDisabled.value = false;
  }, 1000);
},100);
</script>

<template>
  <Button v-bind="getBindValue" :style="{
    backgroundColor: getBackgroundColor(color)
  }" :class="[(props.disabled || !color) ? '' : 'hover', getButtonClass, isDisabled?'events-none':'']"  @click="debouncedClick">
    <template #icon>
      <slot name="icon" />
    </template>
    <template #default="data">
      <Icon v-if="preIcon" :icon="preIcon" :size="iconSize" />
      <slot v-bind="data || {}" />
      <Icon v-if="postIcon" :icon="postIcon" :size="iconSize" />
    </template>
  </Button>
</template>
<style lang="less" scoped>
.hover {
  color: v-bind(textColor);

  &:hover {
    background-color: v-bind(currentColor) !important;
    color: v-bind(textColor);
    border: 1px solid transparent;
  }
}
.events-none{
  pointer-events: none;
}
</style>